<ion-header>
    <ion-toolbar content-page class="fir-toolbar">
        <ion-buttons start>
            <button ion-button icon-only (click)="backHandle($event)">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            续期客户{{dataTotal}}
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content class="client-list-content-container" (ionScrollStart)="scrollStart($event)" (ionScrollEnd)="scrollEnd($event)"
    (ionScroll)="scrolling()">

    <ion-refresher [pullMax]="800" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
    </ion-refresher>

    <client-list-option ion-fixed [pageKind] = 'renewal' (itemChanged)="itemChangeHandle($event)"></client-list-option>

    <div *ngIf="(!clientsData || clientsData.length === 0) && isLoaded" class="no-data">
        <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
        <div class="no-data-txt">没有相关数据</div>
    </div>
    <ion-list [virtualScroll]="clientsData" [approxItemHeight]="clientItemHeight">

        <client-list-item [item]="item" *virtualItem="let item" (callNumber)="callClickHandle($event)">
            <button ion-button class="renewal-details" (click)="viewDetail($event,item)">
                查看续期详情
            </button>

            <div class="item annual-fee renewal">
                最近续期时间&nbsp;&nbsp;<span class="v">{{item.payToDate | dateTrans}}</span>
            </div>
        </client-list-item>

        <!--
        <div class="client-item" *virtualItem="let item">
            <div class="client-item-inner">
                <div class="client-head" (click)="goToDetail(item.clientId)">
                    <button class="l-message">
                        <i class="client-icon"
                           [ngClass]="{'male':item.sex == 'M','female':item.sex == 'F'}">
                            <input type="hidden" [(ngModel)]="item.clientId">
                        </i>
                    </button>
                </div>
                <div class="vip-flag-wrapper">
                    <i *ngIf="item.vipFlag" [ngClass]="{'gold':item.vipFlag == 1,'platinum':item.vipFlag == 2,'diamond':item.vipFlag == 3,'supreme':item.vipFlag == 4}"></i>
                </div>
                <div class="client-remark">
                    <div class="item name" [ngClass]="{'is-death':item.deathFlag === 'Y'}">
                        {{item.name}}
                    </div>
                    <div class="item age">
                        {{item.age}}岁
                    </div>
                    <div class="item annual-fee">
                        最新续期时间&nbsp;&nbsp;<span class="v">{{item.payToDate | dateTrans}}</span>
                    </div>
                </div>
                <div class="fun-wrapper">
                    <button class="view-details" (click)="viewDetail($event,item)">
                        查看续期详情
                    </button>
                    <button [disabled]="!item.mobilePhone || !item.mobilePhone.length"
                            ion-button class="call"
                            (click)="callClickHandle($event,item)">
                        呼叫
                    </button>
                </div>
            </div>
        </div>
        -->

    </ion-list>

    <div class="is-arrival-bottom" [ngClass]="{'bottom':isArriveBottom}">
        到底了
    </div>

    <ion-fab bottom right class="go-up">
        <button ion-fab (click)="goUp()" color="light">
            <img class="go-up-icon" src="./assets/images/client/client-list/icon_top.png" alt="">
        </button>
    </ion-fab>

    <!--<ion-infinite-scroll class="tool-bottom" (ionInfinite)="getMore($event)">-->
        <!--<ion-infinite-scroll-content loadingText="加载中..."></ion-infinite-scroll-content>-->
    <!--</ion-infinite-scroll>-->

    <ion-select #selectMobile interface="action-sheet" cancelText="取消">
        <ion-option (ionSelect)="nativeCallPhone(num.mobile)" *ngFor="let num of currentMobileList index as index">
            {{num.mobile}}
        </ion-option>
    </ion-select>
    <ion-fab class="fab-bottom-shadow-list">
        <button ion-fab style="display: none"></button>
    </ion-fab>
</ion-content>
